<template>
  <div id="maskRegister">
    <h1 style="margin-bottom: 64px">创建密码</h1>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password" style="max-width: 480px" />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="form.checkPassword" style="max-width: 480px" />
      </el-form-item>
      <div style="margin: 0 auto; position: absolute">
        <el-button type="primary" @click="onSubmit">创建</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="js">
import { reactive } from 'vue'
import * as bip39 from 'bip39'
import ethwallet, { hdkey } from 'ethereumjs-wallet'
import storage from '../../utils/Storage'
// import util from 'ethereumjs-util'
// import Wallet from 'ethereumjs-wallet'
// do not use same name with ref
const form = reactive({
  password: '',
  checkPassword: ''
})

const wallet = reactive(storage.getItem('wallet') || {})

const create = async () => {
  const pass = form.password
  if (!pass) return false
  let mnemonic = bip39.generateMnemonic()
  alert('您的助记词为:' + mnemonic)
  const checkMnemonic = prompt('请输入您的助记词')
  if (mnemonic === checkMnemonic) {
    //1.将助记词转成seed
    let seed = await bip39.mnemonicToSeed(mnemonic)
    //3.通过hdkey将seed生成HD Wallet
    let hdWallet = hdkey.fromMasterSeed(seed)
    //4.生成钱包中在m/44'/60'/0'/0/i路径的keypair
    let keyPair = hdWallet.derivePath("m/44'/60'/0'/0/0")
    // 获取钱包对象
    let wallet = keyPair.getWallet()
    // 获取钱包地址
    let lowerCaseAddress = wallet.getAddressString()
    // 获取钱包校验地址
    let CheckSumAddress = wallet.getChecksumAddressString()
    // 获取私钥
    let prikey = wallet.getPrivateKey().toString('hex')
    let keystore = await wallet.toV3(pass)
    console.log(keystore)
    // 保存钱包信息
    const walletInfo = {
      address: lowerCaseAddress,
      prikey,
      keystore,
      balance: 0,
      mnemonic // 助记词不应该记录下来仅仅是为了便于演示
    }
    storage.setItem('wallet', walletInfo)
    wallet = walletInfo
  } else {
    alert('助记词错误请重新输入')
  }
}
const onSubmit = () => {
  if (form.password !== form.checkPassword) {
    console.log('密码和确认密码不相同')
  } else {
    create()
    console.log('创建成功')
  }
}

/**
 * 导出私钥
 * @returns {Promise<boolean>}
 */
const exportKey = async () => {
  let pass = prompt('请输入密码')
  let walletObj
  try {
    walletObj = await ethwallet.fromV3(wallet.keystore, pass)
  } catch (error) {
    alert('密码错误')
    return false
  }
  let key = walletObj.getPrivateKey().toString('hex')
  alert(key)
}
/**
 * 导出keystore
 */
const exportKeyStore = () => {
  alert(JSON.stringify(wallet.keystore))
}

/**
 * 添加助记词导入钱包方法
 * @returns {Promise<boolean>}
 */
const importWallet = async () => {
  const mnemonic = prompt('请输入助记词')
  const pass = prompt('请输入您的钱包密码')
  if (!pass) return false
  //1.将助记词转成seed
  let seed = await bip39.mnemonicToSeed(mnemonic)
  //3.通过hdkey将seed生成HD Wallet
  let hdWallet = hdkey.fromMasterSeed(seed)
  //4.生成钱包中在m/44'/60'/0'/0/i路径的keypair
  let keyPair = hdWallet.derivePath("m/44'/60'/0'/0/0")
  // 获取钱包对象
  let wallet = keyPair.getWallet()
  // 获取钱包地址
  let lowerCaseAddress = wallet.getAddressString()
  // 获取钱包校验地址
  let CheckSumAddress = wallet.getChecksumAddressString()
  // 获取私钥
  let prikey = wallet.getPrivateKey().toString('hex')
  let keystore = await wallet.toV3(pass)
  console.log(keystore)
  // 保存钱包信息
  const walletInfo = {
    address: lowerCaseAddress,
    prikey,
    keystore,
    balance: 0,
    mnemonic // 助记词不应该记录下来仅仅是为了便于演示
  }
  storage.setItem('wallet', walletInfo)
  wallet = walletInfo
}

/**
 * 私钥解锁
 * @returns {Promise<void>}
 */
const importByPrivateKey = async () => {
  const key = prompt('请输入私钥')
  let privatekey = new Buffer(key, 'hex')
  let pass = prompt('请输入密码')
  let wallet = ethwallet.fromPrivateKey(privatekey)
  let keystore = await wallet.toV3(pass)
  // 获取钱包地址
  let lowerCaseAddress = wallet.getAddressString()
  const walletInfo = {
    address: lowerCaseAddress,
    prikey: key,
    keystore,
    balance: 0
  }
  console.log(walletInfo)
  storage.setItem('wallet', walletInfo)
}
</script>

<style scoped>
#maskRegister {
  position: absolute;
  width: 1000px;
  top: 40%;
  left: 35%;
  /* 自身高度一半的负值 */
  margin-top: -50px;
  /* 自身宽度一半的负值 */
  margin-left: -50px;
}
</style>